<template>
  <div class="examination">
    <top-bar>
      <p slot="title">{{title}}</p>
      <p slot="right"></p>
    </top-bar>
    <scroll class="examination-scroll">
      <section class="examination-wrapper">
        <header>
          <h2>{{secondTitle}}</h2>
        </header>
        <ul class="examination-list">
          <li v-for="(item, index) in examination" class="examination-item" :class="'examination-item'+index">
              <router-link :to="{path: '/examination/detail',query:{parentId: item.detailId,target: item.target}} ">
                <div class="img-box">
                  <img :src="'../../../static/img/'+item.logo"/>
                </div>
                <div class="content">
                  <i class="logo" :style="{backgroundColor: item.color}">{{item.name}}</i>
                  <p :style="{color: item.color}">{{item.description}}</p>
                  <span>{{item.remark}}</span>
                  <div class="right-arrow">
                    <p class="price">{{item.price | currency('￥')}}</p>
                    <span>点击详情></span>
                  </div>
                </div>
              </router-link>
          </li>
        </ul>
      </section>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
    import TopBar from "../../components/top-bar/top-bar";
    import Scroll from "../../components/scroll/scroll";
    import {ERR_OK} from "../../api/config";
    import {getPhysiatrics, getExamination} from "../../api/ajax";

    export default {
      components: {
        Scroll,
        TopBar},
      name: "examination",
      data () {
        return {
          title: '定制体检',
          secondTitle: "",
          examination: []
        }
      },
      created () {
        this._initExamination()
      },
      mounted () {

      },
      methods: {
        _getPhysiatrics () {
          getPhysiatrics().then((res) => {
            let response = res.data
            if (response.code === ERR_OK) {
              this.examination = response.result
            }
          }).catch((err) => {
            console.log('获取理疗列表失败')
          })
        },
        _getExamination () {
          getExamination().then((res) => {
            let response = res.data
            if (response.code === ERR_OK) {
              this.examination = response.result
            }
          }).catch((err) => {
            console.log('获取体检列表失败')
          })
        },
        _initExamination () {
          let query = this.$route.query.prev
          if (query == 'examination') {
            this._getExamination()
            this.title = '定制体检'
            this.secondTitle = '免费体检'
          } else {
            this._getPhysiatrics()
            this.title = '预约理疗'
            this.secondTitle = '理疗项目'
          }
        }
      },
      watch: {
        '$route': "_initExamination"
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";
  .examination{
    overflow: hidden;
    height: 100vh;
    background-color: $bc;
    position: relative;
    .examination-scroll{
      height: 99vh;
      overflow: hidden;
      .examination-wrapper{
        padding: 90px 20px;
        height: 100vh;
        overflow: hidden;
        header{
          h2{
            @include font-dpr(28px);
            color: #535353;
            line-height: 40px;
            text-align: center;
            margin-top: 30px;
            &:before,&:after{
              content: "";
              display: inline-block;
              width: 26px;
              border-bottom: 1px solid #777777;
              margin: 0 20px;
            }
          }
        }
        .examination-list{
          .examination-item{
            margin-top: 14px;
            background-color: #ffffff;
            border-radius: 10px;
            font-size: 0;
            min-height: 240px;
            padding: 46px 30px 0 0;
            opacity: 0;
            a{
              display: flex;
              .img-box{
                flex: 1;
                img{
                  width: 100%;
                  height: 210px;
                }
              }
              .content{
                height: 100%;
                flex: 1;
                .logo{
                  display: inline-block;
                  @include font-dpr(24px);
                  color: #ffffff;
                  /*background-color: #57b279;*/
                  line-height: 30px;
                  padding: 5px 18px;
                  border-radius: 20px;
                }
                p{
                  margin-top: 10px;
                  @include font-dpr(32px);
                  /*color: #57b279;*/
                  font-weight: 300;
                }
                span{
                  @include font-dpr(24px);
                  color: #9fa0a0;
                }
                .right-arrow{
                  display: flex;
                  align-items: center;
                  @include font-dpr(24px);
                  text-align: right;
                  letter-spacing: 1px;
                  .price{
                    margin: 0;
                    text-align: left;
                    @include font-dpr(24px);
                    flex: 1;
                    color: $priceCor;
                  }
                  span{
                    color: #262626;
                  }
                }
              }
            }
          }
          .examination-item0{
            animation: fade0 1s ease;
            animation-delay: 0s;
            animation-fill-mode: forwards;
          }
          .examination-item1{
            animation: fade1 1s ease;
            animation-delay: 400ms;
            animation-fill-mode: forwards;
          }
        }
      }
    }
  }

  @keyframes fade0 {
    0% {
      opacity: 0;
      transform: scale(0.6);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes fade1 {
    0% {
      opacity: 0;
      transform: scale(0.6);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

</style>
